<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.transitionbox{
			width: 100px;
			height: 100px;
			border: 2px solid;
			background-color: antiquewhite;
			/*横向拉伸效果*/
			transition: 0.5s;
		}
		/*手表移入div动画执行*/
		.transitionbox:hover{
			width: 500px;
			height: 500px;
		}
		.transitionbox1{
			width: 150px;
			height: 150px;
			background-color: #00FFFF;
			transition: width 1s;
	
		}
		.transitionbox1:hover{
			width: 700px;
		}
	</style>
	<body>
		<h3>拉伸盒子动画效果</h3>
		<h5>transition他有两个参数，拉伸方向width，2s动画执行时间</h5>
		<div class="transitionbox"></div>
		<div class="transitionbox1"></div>
	</body>
</html>
